<template>
  <div class="addorder">
    <header>
      <h4>
        添加订单

        <button type="button" style="float: right; margin-top: 20px;margin-right: 20px;" >
          返回
        </button>
      </h4>
    </header>
    <div class="box">
      <!-- 购买人信息 -->
      <div class="con">
        <h5>购买人信息</h5>
        <span class="sp1"
          >选择购买人:
          <input
            type="text"
            placeholder="请输入购买人企业名称关键字"
            class="conIpt1"
          />
        </span>
        <el-table
          :data="peopleData"
          border
          :span-method="arraySpanMethod"
          style="width: 100%"
        >

          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="date" label="购买人" width="180">
          </el-table-column>
          <el-table-column prop="name" label="购买人电话" width="180">
          </el-table-column>
          <el-table-column prop="address" label="购买人主体性质">
        </el-table-column>


        </el-table>
      </div>
      <!-- 商品信息 -->
      <div class="con">
        <h5>商品信息</h5>
        <span class="sp1"
          >检索药材:
          <input
            type="text"
            placeholder="请输入中药材关键字或者编码"
            class="conIpt1"
          />
        </span>
        <el-table
          :data="shopData"
          border
          :span-method="arraySpanMethod"
          style="width: 100%"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="name" label="药材名称" width="180">
          </el-table-column>
          <el-table-column prop="num" label="库存" width="180">
          </el-table-column>
          <el-table-column prop="kind" label="包装方式"> </el-table-column>
          <el-table-column prop="count" label="起购量"> </el-table-column>
          <el-table-column prop="danwei" label="单位"> </el-table-column>
        </el-table>
        <!-- <el-button style="float: right;" class="btn">确定选择</el-button> -->
      </div>

      <!-- 订单基本信息 -->
      <div class="con">
        <h5>订单基本信息</h5>
        <div class="form">
          购买数量:
          <input
            type="text"
            placeholder="请输入大于起购量"
            style="height: 35px"
          />公斤 <br />
          是否需要发票:
          <select name="" id="" style="height: 35px">
            <option value="">是</option>
            <option value="">否</option>
          </select>
          <el-button style="margin-left: 20px">填写发票信息</el-button>
        </div>
      </div>

      <!-- 收货信息 -->
      <div class="con">
        <h5>收货基本信息</h5>
        <div class="receipt">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="150px"
            class="demo-ruleForm"
          >
            <el-form-item label="收货人" prop="user">
              <el-input v-model="ruleForm.user"></el-input>
              <el-button style="position: absolute">更换收货地址</el-button>
            </el-form-item>
            <el-form-item label="收货手机号码" prop="mobile">
              <el-input v-model="ruleForm.mobile"></el-input>
            </el-form-item>
            <el-form-item label="收货地址">
              <v-distpicker></v-distpicker>
            </el-form-item>
            <el-form-item>
              <input
                type="text"
                placeholder="请输入收货详情地址"
                style="height: 50px; width: 440px"
              />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 物流信息 -->
      <div class="con">
        <h5>
          物流信息
          <a href="javascript:;" style="float: right"  @click="dialogFormWuLiu = true">添加物流单号</a>
        </h5>
        <div class="wuliu">物流单号:暂无</div>
      </div>
      <!-- 添加物流单号 -->
      <el-dialog title="收货地址" :visible.sync="dialogFormWuLiu">
  <el-form :model="wlform">
    <el-form-item label="请输入物流单号">
      <el-input v-model="wlform.wldh" autocomplete="off" placeholder="请输入物流单号"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormWuLiu = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormWuLiu = false">确 定</el-button>
  </div>
</el-dialog>
      <!-- 订单附件 -->
      <div class="con">
        <h5>订单附件</h5>

        <el-table border :data="uploadList" style="width: 100%">
          <el-table-column prop="name" label="支付凭证" width="180">
            <el-upload class="upload-demo" ref="upload">
              <a href="javascript:;">上传</a>
            </el-upload>
          </el-table-column>
          <el-table-column prop="name" label="发货凭证" width="180">
            <el-upload class="upload-demo" ref="upload">
              <a href="javascript:;">上传</a>
            </el-upload>
          </el-table-column>
          <el-table-column prop="name" label="合同" width="180">
            <el-upload class="upload-demo" ref="upload">
              <a href="javascript:;">上传</a>
            </el-upload></el-table-column
          >
          <el-table-column prop="name" label="发票" width="180">
            <el-upload class="upload-demo" ref="upload">
              <a href="javascript:;">上传</a>
            </el-upload>
          </el-table-column>
        </el-table>
      </div>
      <!-- 备注信息 -->
      <div class="con">
        <h5>
          备注信息
          <a href="javascript:;" style="float: right" @click="addBeiZhu">添加备注信息</a>
        </h5>
        <div class="remark">
          <p>2023-03-14 14:22:36 xxx 第一条备注信息</p>
          <p>2023-03-14 14:22:36 xxx 第二条备注信息,客户希望尽快发货</p>
          <p>
            2023-03-14 14:22:36 xxx
            第三条备注信息,客户今天又打电话催发货了,需抓紧安排落实
          </p>
        </div>
        <el-button type="primary" style="margin-left: 45%" @click="add"
          >确认添加</el-button
        >
      </div>
      <!-- 备注信息弹框/ -->
      <el-dialog title="收货地址" :visible.sync="dialogFormBeiZhu">
  <el-form :model="form">
    <el-form-item label="备注信息" :label-width="formLabelWidth">
      <textarea v-model="form.info" autocomplete="off" placeholder="请输入修改订单内容及原因"></textarea>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormBeiZhu = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormBeiZhu = false">确 定</el-button>
  </div>
</el-dialog>
    </div>
  </div>
</template>
<script>
import VDistpicker from "v-distpicker"; //引入v-distpicker
export default {
  name: "addOrder",
  components: {
    VDistpicker, //注册组件
  },
  mixins: [],
  props: {},
  data() {
    return {
      peopleData: [
        {
          date: "xxx有限责任公司",
          name: "1888888888888",
          address: "广东省深圳市南山区科兴科园路",
        },
        {
          date: "张小刚",
          name: "1888888888888",
          address: "广东省深圳市南山区科兴科园路",
        },
        {
          date: "xxx有限责任公司",
          name: "1888888888888",
          address: "广东省深圳市南山区科兴科园路",
        },
        {
          date: "张小刚",
          name: "1888888888888",
          address: "广东省深圳市南山区科兴科园路",
        },
        ,
        {
          date: "",
          name: "",
          address: "1",
        },
      ],
      shopData: [
        {
          name: "金银花统山东",
          num: "10000",
          count: "500",
          danwei: "公斤",
          kind: "桶",
        },
        {
          name: "金银花统山东",
          num: "10000",
          count: "500",
          danwei: "公斤",
          kind: "桶",
        },
        {
          name: "金银花统山东",
          num: "10000",
          count: "500",
          danwei: "公斤",
          kind: "桶",
        },
        {
          name: "金银花统山东",
          num: "10000",
          count: "500",
          danwei: "公斤",
          kind: "桶",
        },
        {
            name: "",
          num: "",
          count: "",
          danwei: "",
          kind: "1",
        }
      ],
      ruleForm: {
        user: "",
        mobile: "",
      },
      rules: {
        user: [{ required: true, message: "", trigger: "blur" }],
        mobile: [{ required: true, message: "", trigger: "blur" }],
      },
      uploadList: [
        {
          name: "111111111",
        },
      ],
      dialogFormBeiZhu: false,
      dialogFormWuLiu:false,
      form:{
         info:''
      },
      wlform:{
        wldh:''
      }
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    add() {
      this.$router.push("/submit");
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex % 5 ===4 ) {
          if (columnIndex === 0) {
            return [0,2];
          } else if (columnIndex === 1) {
            return [1, 6];
          }
        }
      },
    // //   添加物流单号
    //   addWuLiu(){
    //    dialogFormWuLiu=true
    //   },
    // //   添加备注信息
    // addBeiZhu(){
    //    this.data.dialogFormBeiZhu=false
    // }
  },
};
</script>
<style lang="scss" scoped>
.order {
  width: 100%;
  border: 1;
}
.wuliu {
  width: 100%;
  height: 200px;
  text-align: center;
  line-height: 200px;
}
.remark {
  width: 100%;
  height: 100px;
  padding-left: 30px;
  box-sizing: border-box;
  p {
    margin-top: 10px;
  }
}
.addorder {
  background-color: #f5f5f5;
  width: 100%;
  height: 100%;
  margin: auto;
}
header {
  width: 100vw;
  height: 60px;
  border-bottom: 2px solid #e4e4e4;
  line-height: 60px;
  padding-left: 15%;
  box-sizing: border-box;
}
.box {
  width: 1000px;
  margin: auto;
  background-color: #fff;
  margin-top: 30px;
}
h5 {
  background-color: #d7d7d7;
  height: 60px;
  width: 1000px;
  line-height: 60px;
  padding-left: 20px;
  box-sizing: border-box;
}
.sp1 {
  line-height: 100px;
  margin-left: 40%;
}
.conIpt1 {
  padding: 10px;
  width: 360px;
  box-sizing: border-box;
  
}
.el-table {
  margin-left: 10%;
  margin-bottom: 20px;

}
a{
    margin-right: 20px;
}

.con {
  width: 800px;
}
.form {
  width: 300px;
  height: 100px;
  line-height: 50px;
  margin-left: 40%;
  margin-top: 30px;
}
.receipt {
  width: 600px;
  height: 400px;
  margin: auto;
  margin-top: 40px;
}
</style>
